<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Input - Slot</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
    <style>
      .grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(250px, 1fr));
        grid-row-gap: 20px;
        grid-column-gap: 20px;
      }
      h2 {
        font-size: 12px;
        font-weight: normal;

        color: #6f7378;

        margin-top: 10px;
      }
      @media screen and (max-width: 800px) {
        .grid {
          grid-template-columns: 1fr;
          padding: 0;
        }
      }

      .required {
        color: red;
      }
    </style>
  </head>

  <body>
    <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-title>Input - Slot</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content id="content" class="ion-padding">
        <h1>Label Slot</h1>
        <div class="grid">
          <div class="grid-item">
            <h2>No Fill / Start Label</h2>
            <ion-input label-placement="start" value="hi@ionic.io">
              <div slot="label">Email <span class="required">*</span></div>
            </ion-input>
          </div>

          <div class="grid-item">
            <h2>Solid / Start Label</h2>
            <ion-input label-placement="start" fill="solid" value="hi@ionic.io">
              <div slot="label">Email <span class="required">*</span></div>
            </ion-input>
          </div>

          <div class="grid-item">
            <h2>Outline / Start Label</h2>
            <ion-input label-placement="start" fill="outline" value="hi@ionic.io">
              <div slot="label">Email <span class="required">*</span></div>
            </ion-input>
          </div>

          <div class="grid-item">
            <h2>No Fill / Floating Label</h2>
            <ion-input label-placement="floating" value="hi@ionic.io">
              <div slot="label">Email <span class="required">*</span></div>
            </ion-input>
          </div>

          <div class="grid-item">
            <h2>Solid / Floating Label</h2>
            <ion-input label-placement="floating" fill="solid" value="hi@ionic.io">
              <div slot="label">Email <span class="required">*</span></div>
            </ion-input>
          </div>

          <div class="grid-item">
            <h2>Outline / Floating Label</h2>
            <ion-input label-placement="floating" fill="outline" value="hi@ionic.io">
              <div slot="label">Email <span class="required">*</span></div>
            </ion-input>
          </div>
        </div>

        <h1>Start/End Slots</h1>
        <div class="grid">
          <div class="grid-item">
            <h2>No Fill / Start Label</h2>
            <ion-input label-placement="start" value="hi@ionic.io" label="Email">
              <ion-icon slot="start" name="lock-closed" aria-hidden="true"></ion-icon>
              <ion-button fill="clear" slot="end" aria-label="Show/hide password">
                <ion-icon slot="icon-only" name="eye" aria-hidden="true"></ion-icon>
              </ion-button>
            </ion-input>
          </div>

          <div class="grid-item">
            <h2>Solid / Start Label</h2>
            <ion-input label-placement="start" fill="solid" value="hi@ionic.io" label="Email">
              <ion-icon slot="start" name="lock-closed" aria-hidden="true"></ion-icon>
              <ion-button fill="clear" slot="end" aria-label="Show/hide password">
                <ion-icon slot="icon-only" name="eye" aria-hidden="true"></ion-icon>
              </ion-button>
            </ion-input>
          </div>

          <div class="grid-item">
            <h2>Outline / Start Label</h2>
            <ion-input label-placement="start" fill="outline" value="hi@ionic.io" label="Email">
              <ion-icon slot="start" name="lock-closed" aria-hidden="true"></ion-icon>
              <ion-button fill="clear" slot="end" aria-label="Show/hide password">
                <ion-icon slot="icon-only" name="eye" aria-hidden="true"></ion-icon>
              </ion-button>
            </ion-input>
          </div>

          <div class="grid-item">
            <h2>No Fill / Floating Label</h2>
            <ion-input label-placement="floating" value="hi@ionic.io" label="Email">
              <ion-icon slot="start" name="lock-closed" aria-hidden="true"></ion-icon>
              <ion-button fill="clear" slot="end" aria-label="Show/hide password">
                <ion-icon slot="icon-only" name="eye" aria-hidden="true"></ion-icon>
              </ion-button>
            </ion-input>
          </div>

          <div class="grid-item">
            <h2>Solid / Floating Label</h2>
            <ion-input label-placement="floating" fill="solid" value="hi@ionic.io" label="Email">
              <ion-icon slot="start" name="lock-closed" aria-hidden="true"></ion-icon>
              <ion-button fill="clear" slot="end" aria-label="Show/hide password">
                <ion-icon slot="icon-only" name="eye" aria-hidden="true"></ion-icon>
              </ion-button>
            </ion-input>
          </div>

          <div class="grid-item">
            <h2>Outline / Floating Label</h2>
            <ion-input label-placement="floating" fill="outline" value="hi@ionic.io" label="Email">
              <ion-icon slot="start" name="lock-closed" aria-hidden="true"></ion-icon>
              <ion-button fill="clear" slot="end" aria-label="Show/hide password">
                <ion-icon slot="icon-only" name="eye" aria-hidden="true"></ion-icon>
              </ion-button>
            </ion-input>
          </div>
        </div>

        <h1>Async Slot Content</h1>
        <div class="grid">
          <div class="grid-item">
            <h2>Outline / Async Label</h2>
            <ion-input id="solid-async" label-placement="floating" fill="outline" value="hi@ionic.io"></ion-input>
          </div>

          <div class="grid-item">
            <h2>Outline / Async Decorations</h2>
            <ion-input id="async-decorations" label-placement="floating" fill="outline" label="Email"></ion-input>
          </div>
        </div>

        <ion-button onclick="addSlot()">Add Slotted Content</ion-button>
        <ion-button onclick="updateSlot()">Update Slotted Content</ion-button>
        <ion-button onclick="removeSlot()">Remove Slotted Content</ion-button>
      </ion-content>
    </ion-app>

    <script>
      const solidAsync = document.querySelector('#solid-async');
      const asyncDecos = document.querySelector('#async-decorations');

      const getSlottedLabel = () => {
        return solidAsync.querySelector('[slot="label"]');
      };

      const getSlottedStartDeco = () => {
        return asyncDecos.querySelector('[slot="start"]');
      };

      const getSlottedEndDeco = () => {
        return asyncDecos.querySelector('[slot="end"]');
      };

      const addSlot = () => {
        if (getSlottedLabel() === null) {
          const labelEl = document.createElement('div');
          labelEl.slot = 'label';
          labelEl.innerHTML = 'Email <span class="required">*</span>';

          solidAsync.appendChild(labelEl);
        }

        if (getSlottedStartDeco() === null) {
          const startEl = document.createElement('div');
          startEl.slot = 'start';
          startEl.innerHTML = 'Start';

          asyncDecos.insertAdjacentElement('afterbegin', startEl);
        }

        if (getSlottedEndDeco() === null) {
          const endEl = document.createElement('div');
          endEl.slot = 'end';
          endEl.innerHTML = 'End';

          asyncDecos.insertAdjacentElement('beforeend', endEl);
        }
      };

      const removeSlot = () => {
        const slottedLabel = getSlottedLabel();
        if (slottedLabel !== null) {
          slottedLabel.remove();
        }

        const slottedStartDeco = getSlottedStartDeco();
        if (slottedStartDeco !== null) {
          slottedStartDeco.remove();
        }

        const slottedEndDeco = getSlottedEndDeco();
        if (slottedEndDeco !== null) {
          slottedEndDeco.remove();
        }
      };

      const updateSlot = () => {
        const slottedContent = getSlottedLabel();

        if (slottedContent !== null) {
          slottedContent.textContent = 'This is my really really really long text';
        }
      };
    </script>
  </body>
</html>
